<template>
  <div class="order-box">
    <div class="order-num">
      <span>订单号：<i class="order-no">{{order.subOrderNo || order.orderNo}}</i></span>
      <navigator :url="detailUrl" class="detail">查看详情 <i class="inline">&gt;</i></navigator>
    </div>
    <ul>
      <li v-if="order.serviceType" class="flex-box">
        <i class="type">服务类型：</i>
        <i class="flex-1">{{serviceInfo[order.serviceType] && serviceInfo[order.serviceType].name}}</i>
      </li>
      <li v-if="order.serviceItem" class="flex-box">
        <i class="type">服务对象：</i>
        <i class="flex-1">{{order.serviceItem}}</i>
      </li>
      <li v-if="order.phone" class="flex-box">
        <i class="type">联系方式：</i>
        <i class="flex-1">{{order.phone}}</i>
      </li>
      <li v-if="order.serviceDate" class="flex-box">
        <i class="type">服务时间：</i>
        <i class="flex-1">{{order.serviceDate}}</i>
      </li>
      <li v-if="order.serviceDuration">
        <span class="flex-box" v-if="order.serviceType === 'xsg'" ><i class="type">服务时长：</i> {{order.serviceDuration}}小时</span>
        <span class="flex-box" v-else-if="order.serviceType === 'ys'" ><i class="type">服务时长：</i> {{order.serviceDuration}}天</span>
        <span class="flex-box" v-else ><i class="type">服务时长：</i> {{rangeData.serviceDuration[order.serviceDuration]}}</span>
      </li>
      <li v-if="address" class="flex-box">
        <i class="type">服务地址：</i>
        <i class="flex-1 ">{{address}}</i>
      </li>
    </ul>
    <div v-if="status === 'march' && order.serviceType === 'xsg'" >
      <div v-if="statusVal === 'start'" :class="['btn-full', isDisabled ? 'disabled' : '']" @tap="startOrder">开始服务</div>
      <div v-else-if="statusVal === 'end'" :class="['btn-light', isDisabled ? 'disabled' : '']" @tap="endOrder">结束服务</div>
      <div v-else class="btn-full" :class="['btn-full', isDisabled ? 'disabled' : '']" >已结束</div>
    </div>
  </div>
</template>
<script>
// // import getAddress from '@/interface/address/getAddress'
import updateDate from '@/interface/order/updateDate'
import {rangeData, serviceInfo} from '@/config'
import getOrderDetail from '@/interface/order/getOrderDetail'

export default {
  props: {
    order: Object,
    status: '',
  },
  data () {
    return {
      rangeData,
      serviceInfo,
      // address: '',
      isDisabled: true,
      statusVal: 'start',
    }
  },
  computed: {
    detailUrl () {
      return `/pages/orderDetail/main?id=${this.order.id}`
    },
  },
  methods: {
    // getAdress () {
    //   const addressId = this.order.addressId
    //   getAddress({addressId}).then(data => {
    //     this.address = data.address
    //   })
    // },
    checkWhetherStart(order){
      const orderData = order || this.order
      const {serviceDate, serviceDuration, serviceStartDate, serviceEndDate} = orderData

      const startTime = new Date(serviceDate.replace(/-/g, '/')).getTime()
      const endTime = startTime + Number(serviceDuration || 0) *60*60*1000
      const nowTime = Date.now();
      if(serviceEndDate){ // 如果有结束时间
        this.isDisabled = true
        this.statusVal = ''
        return
      }
      if(startTime < nowTime){ // 现在时间大于服务时间，可以点击开始服务
        this.isDisabled = false;
        if(serviceStartDate){ // 是否开始了服务
          this.statusVal = 'end';
        }else{
          this.statusVal = 'start';
        }
      }else{
        this.isDisabled = true;
        this.statusVal = 'start';
      }
    },
    getOrderDetail(){
      getOrderDetail({ id: this.order.id }).then(data => {
        this.checkWhetherStart(data)
      });
    },
    endOrder(){
      if(this.isDisabled){
        return;
      }
      uni.showModal({
        title: '结束服务',
        content: '确定要结束此订单服务吗？',
        success: res => {
          if (res.confirm) {
            updateDate({
              id: this.order.id,
              type: 1, // 1 => 结束服务
            }).then(() => {
              this.getOrderDetail()
            })
          }
        }
      })
    },
    startOrder () {
      if(this.isDisabled){
        return;
      }
      uni.showModal({
        title: '开始服务',
        content: '确定要开始此订单服务吗？',
        success: res => {
          if (res.confirm) {
            updateDate({
              id: this.order.id,
              type: 0, // 0 => 开始服务
            }).then(() => {
              this.getOrderDetail()
            })
          }
        }
      })
    }
  },
  created () {
    if(this.order.serviceType === 'xsg'){
      this.checkWhetherStart()
    }
  }
}
</script>

<style lang="less">
  .order-box{
    .order-num{
      margin-left: 30upx;
      height: 74upx;
      line-height: 74upx;
      border-bottom: 1upx solid #ddd;
      font-size: 24upx;
      color:#aaa;
      .order-no{
        display: inline;
        color: #888;
      }
      .detail{
        font-size: 28upx;
        float: right;
        color: #3186ff;
        margin-right: 33upx;
      }
    }
    ul {
      margin-left: 30upx;
      padding-top: 16upx;
      padding-bottom: 28upx;
      li {
        font-size: 28upx;
        color: #333;
        line-height: 60upx;
        .type{
          color:#888;
        }
      }
    }
  }

</style>
